<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/base}">
<head>
    <title>用户管理 - 快递管理系统</title>
</head>
<body>
    <div layout:fragment="content">
        <h2 class="mb-4">用户管理</h2>

        <!-- 当前用户ID（隐藏） -->
        <input type="hidden" id="currentUserId" th:value="${currentUserId}">

        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">所有用户</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>用户名</th>
                                <th>真实姓名</th>
                                <th>手机号码</th>
                                <th>邮箱</th>
                                <th>角色</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="user : ${users}">
                                <td th:text="${user.id}"></td>
                                <td th:text="${user.username}"></td>
                                <td th:text="${user.realName}"></td>
                                <td th:text="${user.phoneNumber}"></td>
                                <td th:text="${user.email}"></td>
                                <td>
                                    <span class="badge" th:classappend="${user.roles != null and user.roles.![name].contains('ROLE_ADMIN') ? 'bg-danger' : 'bg-primary'}"
                                          th:text="${user.roles != null and user.roles.![name].contains('ROLE_ADMIN') ? '管理员' : '普通用户'}">
                                    </span>
                                </td>
                                <td>
                                    <button class="btn btn-sm btn-warning change-role-btn"
                                            th:data-user-id="${user.id}"
                                            th:data-username="${user.username}"
                                            th:data-current-role="${user.roles != null and user.roles.![name].contains('ROLE_ADMIN') ? 'ROLE_ADMIN' : 'ROLE_USER'}">
                                        修改身份
                                    </button>
                                    <button class="btn btn-sm btn-danger delete-user-btn"
                                            th:data-user-id="${user.id}"
                                            th:data-username="${user.username}">
                                        删除
                                    </button>
                                </td>
                            </tr>
                            <tr th:if="${#lists.isEmpty(users)}">
                                <td colspan="7">暂无用户数据。</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 修改身份模态框 -->
        <div class="modal fade" id="changeRoleModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">修改用户身份</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <p>您确定要修改用户 <span id="changeRoleUsername"></span> 的身份吗？</p>
                        <div class="form-group">
                            <label for="newRole">选择新身份：</label>
                            <select class="form-select" id="newRole">
                                <option value="ROLE_USER">普通用户</option>
                                <option value="ROLE_ADMIN">管理员</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="confirmChangeRole()">确认修改</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 删除用户模态框 -->
        <div class="modal fade" id="deleteUserModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">删除用户</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <p>您确定要删除用户 <span id="deleteUsername"></span> 吗？此操作不可恢复！</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-danger" onclick="confirmDeleteUser()">确认删除</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页面特定的 JavaScript -->
    <th:block layout:fragment="scripts">
        <script th:src="@{/js/users.js}"></script>
    </th:block>
</body>
</html> 